<template>
	<view class="farm_page" :class="[farmInfo.cropType == 'rice' ? 'rice' : 'corn']">
		<nav-bar fontColor="#FFF" bgColor="themeBgColor" type="transparentFixed">
			农场
		</nav-bar>
        <!-- 公共组件-每个页面必须引入 -->
        <public-module></public-module>
		<!-- 云 -->
		<view class="cloud">
			<text></text>
			<text></text>
			<text></text>
			<text></text>
		</view>
		<!-- 成长阶段：苗 -->
		<view class="seedling_box" v-if="growthRatio >= 0 && growthRatio < 25" @click="onBubble()">
			<image v-if="farmInfo.cropType == 'wheat'" src="http://qn.kemean.cn/upload/202004/24/corn_seedling.png" />
			<image v-else-if="farmInfo.cropType == 'rice'" src="http://qn.kemean.cn/upload/202004/24/rice_seedling.png" />
		</view>
		<!-- 成长阶段：初期 -->
		<view class="initial_box" v-else-if="growthRatio >= 25 && growthRatio < 50" @click="onBubble()">
			<image v-if="farmInfo.cropType == 'wheat'" src="http://qn.kemean.cn/upload/202004/24/corn_seedling2.png" />
			<image v-else-if="farmInfo.cropType == 'rice'" src="http://qn.kemean.cn/upload/202004/24/rice_seedling2.png" />
		</view>
		<!-- 成长阶段：中期 -->
		<view class="medium_box" v-else-if="growthRatio >= 50 && growthRatio < 75" @click="onGrowingUp()">
			<image v-if="farmInfo.cropType == 'wheat'" class="behind" src="http://qn.kemean.cn/upload/202004/24/corn_growing_4.png" />
			<image v-else class="behind" src="http://qn.kemean.cn/upload/202004/24/rice_growing_4.png" />
			<image v-if="farmInfo.cropType == 1201" style="left:31%" class="left_pit" src="http://qn.kemean.cn/upload/202004/24/rice_pit_1.png" />
			<image v-if="farmInfo.cropType == 1201" style="left:50%" class="center_pit" src="http://qn.kemean.cn/upload/202004/24/rice_pit_2.png" />
			<image v-if="farmInfo.cropType == 1201" style="right:30%" class="right_pit" src="http://qn.kemean.cn/upload/202004/24/rice_pit_3.png" />
			<image v-if="farmInfo.cropType == 'wheat'" class="left_crop" :class="{ growing_up: leftCrop }" src="http://qn.kemean.cn/upload/202004/24/corn_growing_2.png" />
			<image v-else class="left_crop" :class="{ growing_up: leftCrop }" src="http://qn.kemean.cn/upload/202004/24/rice_growing_2.png" />
			<image v-if="farmInfo.cropType == 'wheat'" class="center_crop" :class="{ growing_up: centerCrop }" src="http://qn.kemean.cn/upload/202004/24/corn_growing_1.png" />
			<image v-else class="center_crop" :class="{ growing_up: centerCrop }" src="http://qn.kemean.cn/upload/202004/24/rice_growing_1.png" />
			<image v-if="farmInfo.cropType == 'wheat'" class="right_crop" :class="{ growing_up: rightCrop }" src="http://qn.kemean.cn/upload/202004/24/corn_growing_3.png" />
			<image v-else class="right_crop" :class="{ growing_up: rightCrop }" src="http://qn.kemean.cn/upload/202004/24/rice_growing_3.png" />
		</view>
		<!-- 成长阶段：成熟 -->
		<view class="mature_box" v-else-if="growthRatio >= 75" @click="onGrowingUp()">
			<image v-if="farmInfo.cropType == 'wheat'" class="behind" src="http://qn.kemean.cn/upload/202004/24/corn_mature_4.png" />
			<image v-else-if="farmInfo.cropType == 'rice'" class="behind" src="http://qn.kemean.cn/upload/202004/24/rice_mature_4.png" />
			<image v-if="farmInfo.cropType == 1201" class="left_pit" src="http://qn.kemean.cn/upload/202004/24/rice_pit_1.png" />
			<image v-if="farmInfo.cropType == 1201" class="center_pit" src="http://qn.kemean.cn/upload/202004/24/rice_pit_2.png" />
			<image v-if="farmInfo.cropType == 1201" class="right_pit" src="http://qn.kemean.cn/upload/202004/24/rice_pit_3.png" />
			<image v-if="farmInfo.cropType == 'wheat'" class="left_crop" :class="{ growing_up: leftCrop }" src="http://qn.kemean.cn/upload/202004/24/corn_mature_2.png" />
			<image v-else-if="farmInfo.cropType == 'rice'" class="left_crop" :class="{ growing_up: leftCrop }" src="http://qn.kemean.cn/upload/202004/24/rice_mature_2.png" />
			<image v-if="farmInfo.cropType == 'wheat'" class="center_crop" :class="{ growing_up: centerCrop }" src="http://qn.kemean.cn/upload/202004/24/corn_mature_1.png" />
			<image v-else-if="farmInfo.cropType == 'rice'" class="center_crop" :class="{ growing_up: centerCrop }" src="http://qn.kemean.cn/upload/202004/24/rice_mature_1.png" />
			<image v-if="farmInfo.cropType == 'wheat'" class="right_crop" :class="{ growing_up: rightCrop }" src="http://qn.kemean.cn/upload/202004/24/corn_mature_3.png" />
			<image v-else-if="farmInfo.cropType == 'rice'" class="right_crop" :class="{ growing_up: rightCrop }" src="http://qn.kemean.cn/upload/202004/24/rice_mature_3.png" />
		</view>

		<!-- 气泡 -->
		<view class="bubble_box" v-show="bubble">
			<text>{{ bubbleText }}</text>
			<text></text>
			<text></text>
		</view>
		<!-- 浇水|施肥|杀虫 -->
		<view class="jobs_box watering" :class="{ endJobs: startJobs == 2, watering: jobs == 'watering', fertilization: jobs == 'fertilize', insecticide: jobs == 'deworming' }"
		 v-if="jobs">
			<view v-show="startJobs == 1">
				<text></text>
				<text></text>
				<text></text>
			</view>
		</view>
		<!-- 作物收割 -->
		<view class="cropClick" v-if="growthRatio >= 100" @click="onJobs('mature')">
			<image src="http://qn.kemean.cn/upload/202004/24/finger.gif" />
		</view>
		<!-- 成长值 -->
		<view class="growth_value" v-if="growthRatio >= 0">
			<view class="wave_box">
				<view :style="'top:' + (85 - growthRatio) + '%'"></view>
				<view :style="'top:' + (85 - growthRatio) + '%'"></view>
			</view>
			{{ farmInfo.growthValueNow }} / {{ farmInfo.growthValue }}
		</view>
		<!-- 功能 -->
		<view class="features_but_box">
			<view>
				<button class="receive_fertilizer" @click="onDailyTask()"></button>
				<button class="growing_store" @click="pageJump('/pages/integral/integralMall')"></button>
			</view>
			<view>
				<button class="watering_but" @click="onJobs('watering')"></button>
				<button class="fertilization_but" @click="onJobs('fertilize')"></button>
				<button class="eeworming_but" @click="onJobs('deworming')"></button>
			</view>
		</view>
		<view class="mask" v-if="plantingPopups"></view>
		<view class="select_seed_box" v-if="plantingPopups">
			<view class="seed_list">
				<image src="http://qn.kemean.cn/upload/202004/24/riceSeed.png" alt="水稻" />
				<button @click="onPlanting('rice')"></button>
			</view>
			<view class="seed_list">
				<image src="http://qn.kemean.cn/upload/202004/24/cornSeed.png" alt="玉米" />
				<button @click="onPlanting('wheat')"></button>
			</view>
		</view>
		<z-popup v-model="popupShow">
			<view class="daily_task_popup_box">
				<view class="title"></view>
				<view class="close" @click="popupShow = false"></view>
				<view class="daily_task_item">
					<image src="../../../static/icon/farmGame/ic_farm_a.png" mode="aspectFit"></image>
					<view class="info">
						<view class="name_description">
							<view>每日签到</view>
							<text>每日签到，领取{{ dailyTask.growthValueSignIn }}成长值</text>
						</view>
						<button v-if="dailyTask.signInType == 1101" @click="onFeatures('signin')">去签到</button>
						<button v-else-if="dailyTask.signInType == 1102" @click="onReceive('signin')">领取奖励</button>
						<button v-else-if="dailyTask.signInType == 1103" class="gray">已完成</button>
					</view>
				</view>
				<view class="daily_task_item">
					<image src="../../../static/icon/farmGame/ic_farm_b.png" mode="aspectFit"></image>
					<view class="info">
						<view class="name_description">
							<view>分享商品</view>
							<text>每日分享商品，获得{{ dailyTask.growthValueShareGoods }}成长值</text>
						</view>
						<button v-if="dailyTask.shareGoodsType == 1101" @click="onFeatures('share')">去分享</button>
						<button v-else-if="dailyTask.shareGoodsType == 1102" class="active" @click="onReceive('sharegoods')">领取奖励</button>
						<button v-else-if="dailyTask.shareGoodsType == 1103" class="gray">已完成</button>
					</view>
				</view>
				<view class="daily_task_item">
					<image src="../../../static/icon/farmGame/ic_farm_c.png" mode="aspectFit"></image>
					<view class="info">
						<view class="name_description">
							<view>购买商品</view>
							<text>每日购买商品，获得{{ dailyTask.growthValueShopping }}成长值</text>
						</view>
						<button v-if="dailyTask.shoppType == 1101" @click="onFeatures('buy')">去购买</button>
						<button v-else-if="dailyTask.shoppType == 1102" class="active" @click="onReceive('shopping')">领取奖励</button>
						<button v-else-if="dailyTask.shoppType == 1103" class="gray">已完成</button>
					</view>
				</view>
				<view class="daily_task_item">
					<image src="../../../static/icon/farmGame/ic_farm_e.png" mode="aspectFit"></image>
					<view class="info">
						<view class="name_description">
							<view>每日施肥</view>
							<text>每日施肥，获得{{ dailyTask.growthValueFertilize }}成长值</text>
						</view>
						<button v-if="dailyTask.fertilizeType == 1101" @click="onFeatures('fertilize')">去施肥</button>
						<button v-else-if="dailyTask.fertilizeType == 1103" class="gray">已完成</button>
					</view>
				</view>
				<view class="daily_task_item">
					<image src="../../../static/icon/farmGame/ic_farm_f.png" mode="aspectFit"></image>
					<view class="info">
						<view class="name_description">
							<view>每日驱虫</view>
							<text>每日驱虫，获得{{ dailyTask.growthValueInsect }}成长值</text>
						</view>
						<button v-if="dailyTask.insectType == 1101" @click="onFeatures('deworming')">去驱虫</button>
						<button v-else-if="dailyTask.insectType == 1103" class="gray">已完成</button>
					</view>
				</view>
				<view class="daily_task_item">
					<image src="../../../static/icon/farmGame/ic_farm_g.png" mode="aspectFit"></image>
					<view class="info">
						<view class="name_description">
							<view>每日浇水</view>
							<text>每日浇水，获得{{ dailyTask.growthValueWatering }}成长值</text>
						</view>
						<button v-if="dailyTask.waterType == 1101" @click="onFeatures('watering')">去浇水</button>
						<button v-else-if="dailyTask.waterType == 1103" class="gray">已完成</button>
					</view>
				</view>
			</view>
		</z-popup>
	</view>
</template>
<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	import zPopup from '@/components/common/popup';
	let clearBubble;
	export default {
		components: {
			zPopup
		},
		data() {
			return {
				//成长动画触发
				leftCrop: false,
				centerCrop: false,
				rightCrop: false,
				//气泡动画触发
				bubble: false,
				bubbleText: '我在快乐的成长！',
				initBubbleText: '我在快乐的成长！',
				//浇水动画触发
				jobs: 0,
				//浇水开始触发
				startJobs: 0,
				//成长阶段
				farmInfo: {},
				//种植弹窗
				plantingPopups: false,
				growthRatio: 'AAA',
				// 弹窗控制
				popupShow: false,
				// 每日任务
				dailyTask: {}
			};
		},
		created() {
			this.pageData();
		},
		methods: {
			...mapMutations(['setUserInfo', 'setSignPopup']),
			pageJump(url) {
				uni.navigateTo({
					url: url
				});
			},
			onFeatures(type) {
				this.popupShow = false;
				if (type == 'signin') {
					this.setSignPopup(true);
					uni.switchTab({
						url: this.$base.myPath
					});
				} else if (type == 'share' || type == 'buy') {
					uni.switchTab({
						url: this.$base.homePath
					});
				} else {
					this.onJobs(type);
				}
			},
			onReceive(type) {
				this.$http.get('api/game/v1/get_reward', {
					operateType: type
				}).then(res => {
					this.pageData();
					this.onDailyTask();
					uni.showToast({
						title: "领取成功",
					});
				});
			},
			//植物抖动
			onGrowingUp() {
				const _this = this;
				if (!this.leftCrop && !this.centerCrop && !this.rightCrop) {
					this.centerCrop = true;
					setTimeout(() => {
						this.leftCrop = true;
						this.rightCrop = true;
					}, 200);
					setTimeout(() => {
						this.leftCrop = false;
						this.centerCrop = false;
						this.rightCrop = false;
					}, 1200);
					this.onBubble();
				}
			},
			//气泡显示
			onBubble(text) {
				if (text) {
					this.bubbleText = text;
				}
				this.bubble = true;
				clearBubble && clearTimeout(clearBubble);
				clearBubble = setTimeout(() => {
					this.bubble = false;
					this.bubbleText = this.initBubbleText;
				}, 5000);
			},
			onJobs(type) {
				const _this = this;
				if (this.jobs == 0) {
					this.$http
						.get(
							'api/game/v1/operate_task', {
								operateType: type
							}, {
								isPrompt: false,
								load: false
							}
						)
						.then(
							res => {
								if (type == 'mature') {
									uni.showModal({
										title: "操作",
										content: res,
										showCancel: false,
										success: () => {
											this.initBubbleText = '我在快乐的成长！';
											this.bubbleText = '我在快乐的成长！';
											this.growthRatio = 'AAA';
											this.farmInfo = {};
											this.plantingPopups = true;
										}
									})
								} else {
									this.pageData();
									this.jobs = type;
									setTimeout(() => {
										this.startJobs = 1;
										setTimeout(() => {
											this.startJobs = 2;
											setTimeout(() => {
												this.jobs = 0;
												this.startJobs = 0;
											}, 1000);
										}, 2000);
									}, 1000);
								}
							},
							err => {
								this.onBubble(err.info);
							}
						);
				} else if (this.jobs == 'watering') {
					this.onBubble('正在浇水，请稍等！');
				} else if (this.jobs == 'fertilize') {
					this.onBubble('正在施肥，请稍等！');
				} else if (this.jobs == 'deworming') {
					this.onBubble('正在杀虫，请稍等！');
				}
			},
			pageData() {
				this.$http.get('api/game/v1/info', {}, {
					load: false
				}).then(res => {
					if (res.cropType) {
						this.farmInfo = res;
						if (res.growthValue) {
							this.growthRatio = parseInt((res.growthValueNow / res.growthValue) * 100);
						} else {
							this.growthRatio = 'AAA';
						}
						if (this.growthRatio >= 100) {
							this.initBubbleText = '主人~我已经成熟了！';
							this.bubbleText = '主人~我已经成熟了！';
						}
					} else {
						this.plantingPopups = true;
					}
				});
			},
			onDailyTask() {
				this.$http.get('api/game/v1/task').then(res => {
					this.dailyTask = res;
					this.popupShow = true;
				});
			},
			onPlanting(type) {
				this.$http
					.get('api/game/v1/add', {
						type: type
					})
					.then(res => {
						this.plantingPopups = false;
						uni.showToast({
							title: "种植成功！",
							icon: "none"
						});
						this.initBubbleText = '我在快乐的成长！';
						this.bubbleText = '我在快乐的成长！';
						this.growthRatio = 'AAA';
						this.farmInfo = {};
						this.pageData();
					});
			}
		}
	};
</script>
<style lang="scss" scoped>
	@import '@/style/mixin.scss';

	image {
		pointer-events: none;
	}

	.mask {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.5);
		z-index: 11;
	}

	.select_seed_box {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		padding: 30upx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		z-index: 12;

		.seed_list {
			width: 330upx;
			height: 550upx;
			position: relative;

			image {
				width: 100%;
				height: 100%;
			}

			button {
				position: absolute;
				bottom: 40upx;
				left: 50%;
				transform: translateX(-50%);
				width: 264upx;
				height: 74upx;
				@include bis('http://qn.kemean.cn/upload/202004/24/seedBut.png', 100% 100%);
				background-color: transparent;
			}
		}
	}

	.farm_page {
		width: 100%;
		height: 100vh;
		background-color: #82cbf8;
		background-position: center bottom;
		background-repeat: no-repeat;
		background-size: 100% auto;

		&.corn {
			background-image: url('http://qn.kemean.cn/upload/202004/24/corn_bg.png');
		}

		&.rice {
			background-image: url('http://qn.kemean.cn/upload/202004/24/rice_bg.png');

			.seedling_box,
			.initial_box {
				bottom: 280upx;
			}
		}

		// 成长值
		.growth_value {
			position: fixed;
			top: 200upx;
			right: 0;
			background-color: #fff;
			height: 62upx;
			line-height: 62upx;
			color: #328e39;
			padding-left: 50upx;
			padding-right: 30upx;
			font-size: 28upx;

			.wave_box {
				position: absolute;
				top: 50%;
				left: -40upx;
				transform: translateY(-50%);
				height: 80upx;
				width: 80upx;
				background-color: #fff;
				border-radius: 50%;
				border: 2px solid #fff;
				overflow: hidden;

				view {
					position: absolute;
					top: 85%;
					width: 140upx;
					height: 142upx;
					background-position: left top;
					background-repeat: no-repeat;
					background-size: 100% auto;
					background-image: url('http://qn.kemean.cn/upload/202004/24/wave.png');

					&:nth-child(1) {
						left: 0;
						animation: wave 1.2s linear 0s infinite;
					}

					&:nth-child(2) {
						left: 138upx;
						animation: wave 1.2s linear 0s infinite;
					}
				}
			}
		}

		// 云
		.cloud {
			text {
				position: fixed;
				left: -180upx;
				z-index: 0;
				display: block;
				background-position: center center;
				background-repeat: no-repeat;
				background-size: 100% auto;
				background-image: url('http://qn.kemean.cn/upload/202004/24/cloud.png');

				&:nth-child(1) {
					top: 50upx;
					opacity: 0.6;
					width: 64upx;
					height: 33upx;
					animation: cloud 18s linear 2s infinite alternate;
				}

				&:nth-child(2) {
					width: 171upx;
					height: 81upx;
					top: 100upx;
					animation: cloud 11s linear 0s infinite;
				}

				&:nth-child(3) {
					width: 140upx;
					height: 65upx;
					opacity: 0.8;
					top: 230upx;
					animation: cloud 15s linear 0s infinite;
				}

				&:nth-child(4) {
					width: 88upx;
					height: 45upx;
					opacity: 0.3;
					top: 200upx;
					animation: cloud 20s linear 6s infinite alternate;
				}
			}
		}

		//成长阶段：苗 | 成长阶段：初期
		.seedling_box,
		.initial_box {
			position: fixed;
			bottom: 330upx;
			left: 10%;
			width: 80%;
			display: flex;
			justify-content: center;
			align-items: flex-end;

			image {
				width: 70%;
			}
		}

		//成长阶段：中期
		.medium_box,
		.mature_box {
			position: fixed;
			bottom: 300upx;
			left: 0%;
			width: 100%;
			height: 600upx;

			image {
				position: fixed;
				z-index: 2;
			}

			.behind {
				bottom: 500upx;
				width: 218upx;
				left: 50%;
				transform: translateX(-50%);
			}

			.left_crop {
				bottom: 410upx;
				left: 30%;
				margin-left: -59upx;
				width: 118upx;
			}

			.center_crop {
				bottom: 330upx;
				left: 50%;
				margin-left: -86upx;
				width: 172upx;
			}

			.right_crop {
				bottom: 410upx;
				right: 30%;
				margin-right: -59upx;
				width: 118upx;
			}

			.left_pit {
				bottom: 390upx;
				left: 30%;
				margin-left: -59upx;
				width: 110upx;
			}

			.center_pit {
				bottom: 300upx;
				left: 49%;
				margin-left: -86upx;
				width: 182upx;
			}

			.right_pit {
				bottom: 390upx;
				right: 31%;
				margin-right: -59upx;
				width: 110upx;
			}
		}

		//操作
		.features_but_box {
			position: fixed;
			bottom: 58upx;
			left: 0;
			width: 100%;
			padding: 0 40upx;
			display: flex;
			justify-content: space-between;
			align-items: flex-end;
			z-index: 10;

			button {
				background-position: center center;
				background-repeat: no-repeat;
				background-size: 100% auto;
				background-color: transparent;
			}

			>view {
				display: flex;
				align-items: center;

				button {
					margin-left: 40upx;

					&:nth-child(1) {
						margin-left: 0;
					}
				}
			}

			.receive_fertilizer {
				width: 99upx;
				height: 97upx;
				background-image: url('http://qn.kemean.cn/upload/202007/29/1595993007694g1n8mbpp.png');
			}

			.growing_store {
				width: 99upx;
				height: 97upx;
				background-image: url('http://qn.kemean.cn/upload/202007/29/1595989483986jde03buj.png');
			}

			.watering_but {
				width: 84upx;
				height: 95upx;
				background-image: url('http://qn.kemean.cn/upload/202004/24/watering_but.png');
			}

			.fertilization_but {
				width: 80upx;
				height: 101upx;
				background-image: url('http://qn.kemean.cn/upload/202004/24/fertilization_but.png');
			}

			.eeworming_but {
				width: 80upx;
				height: 102upx;
				background-image: url('http://qn.kemean.cn/upload/202004/24/eeworming_but.png');
			}
		}

		//成长动画
		.growing_up {
			animation: growingUp 1s linear;
		}

		//气泡动画
		.bubble_box {
			text {
				position: fixed;
				z-index: 3;

				&:nth-child(3) {
					bottom: 480upx;
					left: 40%;
					width: 20upx;
					height: 20upx;
					background-color: #ffffff;
					border: solid 3upx #3d9b48;
					border-radius: 50%;
					animation: bubble1 0.6s linear;
				}

				&:nth-child(2) {
					bottom: 500upx;
					left: 35%;
					width: 30upx;
					height: 30upx;
					background-color: #ffffff;
					border: solid 3upx #3d9b48;
					border-radius: 50%;
					animation: bubble2 1s linear;
				}

				&:nth-child(1) {
					bottom: 550upx;
					left: 9%;
					width: 240upx;
					height: 111upx;
					background-color: #ffffff;
					border-radius: 56upx;
					border: solid 3upx #3d9b48;
					padding: 20upx 20upx;
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 28upx;
					color: #3d9b48;
					animation: bubble3 1.5s linear;
				}
			}
		}

		//浇水
		.jobs_box {
			position: fixed;
			z-index: 3;
			bottom: 500upx;
			right: 20%;
			background-position: center center;
			background-repeat: no-repeat;
			background-size: 100% auto;
			animation: watering 1s linear;
			transform: rotateZ(-45deg);

			&.watering {
				width: 140upx;
				height: 98upx;
				background-image: url('http://qn.kemean.cn/upload/202004/24/kettle.png');

				text {
					width: 44upx;
					height: 76upx;
					background-image: url('http://qn.kemean.cn/upload/202004/24/droplets.png');
				}
			}

			&.fertilization {
				width: 106upx;
				height: 106upx;
				background-image: url('http://qn.kemean.cn/upload/202004/24/fertilization.png');

				text {
					width: 22upx;
					height: 22upx;
					background-image: url('http://qn.kemean.cn/upload/202004/24/fertilizer.png');
				}
			}

			&.insecticide {
				width: 76upx;
				height: 132upx;
				background-image: url('http://qn.kemean.cn/upload/202004/24/Insecticide.png');

				text {
					width: 18upx;
					height: 64upx;
					background-image: url('http://qn.kemean.cn/upload/202004/24/spray.png');
				}
			}

			&.endJobs {
				animation: endWatering 1s linear;
			}

			text {
				position: absolute;
				top: -20upx;
				background-position: center center;
				background-repeat: no-repeat;
				background-size: 100% auto;
				transform: scale(0, 0);
				left: -20upx;

				&:nth-child(1) {
					animation: droplets 0.6s linear 0s infinite;
				}

				&:nth-child(2) {
					animation: droplets 0.6s linear 0.2s infinite;
				}

				&:nth-child(3) {
					animation: droplets 0.6s linear 0.4s infinite;
				}
			}
		}

		//手指提示
		.cropClick {
			position: fixed;
			z-index: 4;
			bottom: 280upx;
			left: 53%;
			transform: translateX(-50%);
		}
	}

	//云
	@keyframes cloud {
		from {
			left: -160upx;
		}

		to {
			left: 100%;
		}
	}

	//成长动画
	@keyframes growingUp {
		0% {
			transform: scale(1, 1) translateY(0);
		}

		25% {
			transform: scale(1, 1.1) translateY(-5%);
		}

		50% {
			transform: scale(1, 1) translateY(0);
		}

		75% {
			transform: scale(1, 1.1) translateY(-5%);
		}

		100% {
			transform: scale(1, 1) translateY(0);
		}
	}

	//气泡显示
	@keyframes bubble1 {
		0% {
			opacity: 0;
		}

		50% {
			opacity: 0;
		}

		100% {
			opacity: 1;
		}
	}

	@keyframes bubble2 {
		0% {
			opacity: 0;
		}

		70% {
			opacity: 0;
		}

		100% {
			opacity: 1;
		}
	}

	@keyframes bubble3 {
		0% {
			opacity: 0;
		}

		80% {
			opacity: 0;
		}

		100% {
			opacity: 1;
		}
	}

	//水壶旋转
	@keyframes watering {
		0% {
			transform: rotateZ(0deg);
		}

		100% {
			transform: rotateZ(-45deg);
		}
	}

	//水壶旋转
	@keyframes endWatering {
		0% {
			transform: rotateZ(-45deg);
			opacity: 1;
		}

		100% {
			transform: rotateZ(0deg);
			opacity: 0;
		}
	}

	//喷射水滴
	@keyframes droplets {
		0% {
			transform: scale(0, 0);
			left: -20upx;
		}

		100% {
			transform: scale(1.5, 1.5);
			left: -100upx;
		}
	}

	//成长值-波浪
	@keyframes wave {
		0% {
			transform: translateX(0vw);
		}

		100% {
			transform: translateX(-18.66667vw);
		}
	}

	.daily_task_popup_box {
		width: 100%;
		background-color: #f7f7f7;
		border-radius: 20rpx 20rpx 0rpx 0rpx;
		padding: 30rpx;
		position: relative;

		.close {
			@include bis("../../../static/icon/ic_close.png");
			width: 24rpx;
			height: 24rpx;
			position: absolute;
			top: 30rpx;
			right: 30rpx;
		}

		.title {
			width: 392rpx;
			height: 88rpx;
			@include bis("http://qn.kemean.cn/upload/202007/29/1595993456636i3m68lve.png");
			margin: -62rpx auto 30rpx auto;
		}

		.daily_task_item {
			display: flex;
			align-items: center;
			margin-top: 12rpx;
			background-color: #ffffff;
			border-radius: 20rpx;
			padding: 24rpx;

			image {
				width: 90rpx;
				height: 90rpx;
				border-radius: 20rpx;
			}

			.info {
				margin-left: 24rpx;
				flex: 1;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.name_description {
					display: flex;
					flex-direction: column;

					view {
						font-size: 28rpx;
						color: #333333;
						font-weight: bold;
					}

					text {
						font-size: 24rpx;
						color: #333333;
						margin-top: 12rpx;
					}
				}

				button {
					width: 160rpx;
					height: 60rpx;
					border-radius: 30rpx;
					border: solid 1rpx #7cc953;
					background-color: #FFF;
					font-size: 24rpx;
					color: #7cc953;
					line-height: 56rpx;

					&.active {
						background-color: #ffcc1d;
						border-radius: 30rpx;
						border: solid 1rpx #ffcc1d;
						color: #FFF;
					}

					&.gray {
						background-color: #e5e5e5;
						border-radius: 30rpx;
						border: solid 1rpx #e5e5e5;
						color: #FFF;
					}
				}
			}
		}
	}
</style>
